import "./index.less";
import { useNavigate } from "react-router-dom";
import { PageHeader } from "@/components";
import { useState } from "react";

const exData = [
  {
    title: "安康通第六次养老服务",
    type: "养老服务",
    project: "医疗就诊",
    eventType: "服务",
    planNum: "1522",
    completeNum: "1562",
    period: "2023-05-30——2023-06-30",
  },
  {
    title: "安康通第七次养老服务",
    type: "养老服务",
    project: "医疗就诊",
    eventType: "服务",
    planNum: "50",
    completeNum: "41",
    period: "2023-06-30——2023-07-30",
  },
];

export default function ServiceEntry() {
  const navigate = useNavigate();
  const [listData, setListData] = useState([...exData]);

  return (
    <div className="se_contarnier">
      <div className="header-bg"></div>
      <PageHeader title="服务录入" goback={() => navigate("/publicService")} />

      <div className="se_content">
        {listData?.length > 0 &&
          listData?.map((item: any, index: number) => {
            return (
              <div
                className="se_content_meta"
                key={`se_content_meta_${index}`}
                onClick={() =>
                  navigate(`report`, {
                    state: { ItemInfo: item },
                  })
                }
              >
                <div className="se_content_header"></div>
                <div className="se_cm_title">{item.title}</div>
                <div className="se_cm_type">
                  {item.type}-{item.project}
                </div>
                <div className="se_cm_twoBox">
                  <div className="se_cm_msgBox msgbox2">
                    <span className="se_cm_label">计划完成次数：</span>
                    <span className="se_cm_value">{item.planNum}</span>
                  </div>
                  <div className="se_cm_msgBox msgbox2">
                    <span className="se_cm_label">已完成时间：</span>
                    <span className="se_cm_value">{item.completeNum}</span>
                  </div>
                </div>
                <div className="se_cm_msgBox">
                  <span className="se_cm_label">服务周期：</span>
                  <span className="se_cm_value">{item.period}</span>
                </div>
              </div>
            );
          })}
      </div>
    </div>
  );
}
